import { on, trigger, closest, first } from "mvdom";
import { formatDate } from "ts/utils-date";

document.addEventListener("DOMContentLoaded", function (event) {

	on(document, "click", ".date-input input", (evt) => {
		const targetEl = evt.selectTarget;
		const dateInputEl = closest(targetEl, ".date-input");
		const inputEL = <HTMLInputElement>first(dateInputEl, "input")!;
		const value = inputEL.value;
		trigger(targetEl, "SHOW_PICKER", { detail: { targetEl: dateInputEl, value }, cancelable: false });
	});

	on(document, "SET_DATE", ".date-input", (evt) => {
		const dateInputEl = evt.selectTarget;
		const inputEL = <HTMLInputElement>first(dateInputEl, "input")!;
		inputEL.value = evt.detail.value ? formatDate(evt.detail.value) : "";
	});
});